<template>
	<view>
		<view class="messages">
			<view class="avater" @click="getCamera">
				<view class="avater-text">
					头像
				</view>
				<view class="avater-img">
					<image v-if="listInfo.avatar !=''&& imgList == ''" style="width: 100%;border-radius: 150px;" :src="listInfo.avatar" mode="widthFix"></image>
					<image v-else-if="imgList !=''" style="width: 100%;border-radius: 150px;" :src="imgList[0]" mode="widthFix"></image>
					<image v-else style="width: 100%;border-radius: 150px;" src="../../static/icon/1024.png" mode="widthFix"></image>
				</view>
				<view class="avater-right">
					<image style="width: 100%;" src="../../static/goyou.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="fonnum">
				<view class="avater-texts">
					手机号
				</view>
				<view class="fonnum-num">
					{{mobile.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2")}}
				</view>
				<view class="avater-right">
				</view>
			</view>
		</view>
		<view class="messages" style="height: 300rpx;" >
			<!-- 姓名 -->
			<view class="avater-message">
				<view style="display: flex;">
				<view class="avater-text">
					性名
				</view>
				<view v-if="listInfo.user_nickname!=''" class="info-name">
					<input type="text" @blur="blur" v-model="name" :placeholder="listInfo.user_nickname" style="color: #999999;font-size: 15px;">
				</view>
				<view v-else class="info-name">
					填写姓名
				</view>
				</view>	
				
				<view class="avater-right">
					<image style="width: 100%;" src="../../static/goyou.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 性别 -->
			<view class="avater-message">
				<view style="display: flex;">
				<view class="avater-text">
					性别
				</view>
			
				<picker mode="selector" :range="array" @change="picker1" :value="index">
				     <view style="color: #828080;">{{array[index]}}</view>
				 </picker>
				</view>
				<view class="avater-right">
					<image style="width: 100%;" src="../../static/goyou.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 生日 -->
			<view class="avater-message">
				<view style="display: flex;" @click="showun = true">
				<view class="avater-text">
					生日
				</view>
				<view class="info-briday">
					<input type="text" v-model="birthday" :placeholder="listInfo.birthday">
				</view>
				</view>
				<view class="avater-right">
					<image style="width: 100%;" src="../../static/goyou.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
<!-- 		<u-popup :round="10" :show="shows" @close="close">
			<view style="width: 100%;height: 30px;">
				
			</view>
			<view style="width: 50px; height: 50px;margin: 20px auto;">
				
				<image v-if="listInfo.avatar !=''&& imgList == ''" style="width: 100%;border-radius: 150px;" :src="listInfo.avatar" mode="widthFix"></image>
				<image v-else-if="imgList !=''" style="width: 100%;border-radius: 150px;" :src="imgList[0]" mode="widthFix"></image>
				<image v-else style="width: 100%;border-radius: 150px;" src="../../static/icon/1024.png" mode="widthFix"></image>
				
			</view>
			 <view style="text-align: center;"  @click="getCamera">
			 	更改头像
			 </view>
			 <view style="width: 100%;height: 30px;">
			 	
			 </view>
			 <view style="display: flex;width: 300px;margin: 20px auto;">
			 	<view style="margin-right: 20px;">
			 		姓名:
			 	</view>
				<input type="text" @blur="blur" v-model="name" :placeholder="listInfo.user_nickname">
			 </view>
			 <view style="width: 100%;height: 5px;">
			 	
			 </view>
			 <view style="width: 100%;height: 5px;">
			 	
			 </view>
			 <view @click="showun = true" style="display: flex;width: 300px;margin: 20px auto;">
			 	<view style="margin-right: 20px;">
			 		生日:
			 	</view>
			 				<input type="text" v-model="birthday" :placeholder="listInfo.birthday">
			 </view>
			 
			 <view style="display: flex;justify-content: center;width: 80%;height:50px;margin: 20px auto;">
			 	<view style="width: 100%;height: 50px;border-radius: 50px;background-color: #999999;color: #fff;text-align: center;line-height: 50px;font-size: 15px;" @click="shows =!shows">
					取消
			 		
			 	</view>
				
			 </view>
			 <view style="width: 100%;height: 30px;">
			 	
			 </view>
			<birthTime :class="{active: showun}" @confirm="confirms" @cancel="showun=false"></birthTime>
			</u-popup> -->
			 <birthTime :class="{active: showun}" @confirm="confirms" @cancel="showun=false"></birthTime>
	</view>
</template>

<script>
	import birthTime from '@/components/birth-date-plug/index.vue'
	import request from '../../utils/request.js'
    import { jsonParse } from '../../utils/utils.js'
	export default {
		data() {
			return {
				mobile:'',
				listInfo:[],
				shows:false,
				show: false,
				showun:false,
				sex:'',
				name:'',
				birthday:'',
				imgList:[],
				sexage:'0',
				qiNiuToken:'',
				times:'',
				img:'',
				array:['保密','男','女'],
			    index:0
								
			}
		},
		components:{
			birthTime,
		},
		onLoad() {
			this.getinfo()
			
				
		},
		methods: {
			// 修改性别
			 picker1(e){
			            this.index = e.detail.value
							request.changeInfo({
									sex:this.index,
								})
								.then(res => {
									// console.log('成功', res);
									if (res.code == 1) {
										this.getinfo()
										this.shows = false
										uni.showToast({
											title: '性别更改成功',
											duration: 2000
										});
							     
									} else {
										
									}
								})
								.catch(err => {
								});
			        },
			getinfo(){
				request.login_info({
						
					})
					.then(res => {
						   this.listInfo = res.data
						   this.mobile = this.listInfo.mobile
						   this.index = res.data.sex
						if (res.code == 1) {
						} else {
						}
					})
					.catch(err => {
						// console.log('失败了');
					});
			},
			close(){
				
			},
			cancel(){
				this.show =!this.show
			},

			// 七牛云token
			getqiNiuToken(){
				request.qiNiuToken({
					})
					.then(res => {
						 // console.log(res)
						if (res.code == 1) {
							this.qiNiuToken = res.data
							// console.log(this.qiNiuToken);
						} else {
						}
					})
					.catch(err => {
					});
			},
			// 图片上传
			getCamera() {
			    this.getqiNiuToken()
				uni.chooseImage({
					extension:["png","jpg","jpeg","gif"],
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], 
					success: (res) => {
					
						const tempFilePaths = res.tempFilePaths;
						this.imgList.push(tempFilePaths[0])
						console.log(this.imgList[0])
						this.imgList.forEach((item,i)=>{
							let now_time = new Date().getTime();
							var name = now_time + i
							this.times = name
						})
						uni.uploadFile({
							url:'https://up-z1.qiniup.com',
							filePath:this.imgList[0],
							name:'file',
							formData:{
								"key":this.times,//唯一值
								"token":this.qiNiuToken//七牛云token
							},
							success:function(res){
								console.log(res)
								var audio = JSON.parse(res.data)
								var arr = 'https://img.tkbox.top/' + audio.key
								this.img = arr
								request.changeInfo({
										avatar:this.img
									})
									.then(res => {
										if (res.code === 1) {
											this.getinfo()
											uni.showToast({
												title: '头像更改成功',
												duration: 2000
											});
										} else {
										}
									})
									.catch(err => {
										// console.log('失败了');
									});
							
								
							}
							
						})
					
					}
				});
			},
			
		
			// 修改姓名失去焦点事件
			blur(){
				request.changeInfo({
						user_nickname:this.name,
					})
					.then(res => {
						// console.log('成功', res);
						if (res.code == 1) {
							this.getinfo()
							this.shows = false
							uni.showToast({
								title: '姓名更改成功',
								duration: 2000
							});
						} else {
							
						}
					})
					.catch(err => {
						// console.log('失败了');
					});
				
			},
			// 年龄日期
			confirms(date){
				this.showun = false;
				this.birthday = date
				request.changeInfo({
						birthday:this.birthday
					})
					.then(res => {
						// console.log('成功', res);
						if (res.code == 1) {
							this.getinfo()
							this.shows = false
							uni.showToast({
								title: '生日更改成功',
								duration: 2000
							});
				     
						} else {
							
						}
					})
					.catch(err => {
						// console.log('失败了');
					});
			}
		}
	}
</script>

<style scoped>
.messages{
	width: 690rpx;
	height: 200rpx;
	background: #F7F7F7;
	border-radius: 12px 12px 12px 12px;
	opacity: 1;
	margin: 15px auto;
	display: flex;
	flex-direction: column;
	
}
.info{
	width: 345px;
	height: 154px;
	background: #F7F7F7;
	border-radius: 12px 12px 12px 12px;
	opacity: 1;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
	
.avater{
	height: 56rpx;
	width: 630rpx;
	display: flex;
	margin: 30rpx auto;
	
}
.avater-message{
	height: 56rpx;
	width: 90%;
	display: flex;
	margin: 30rpx auto;
	justify-content: space-between;
}
	
.avater-text{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 600;
	color: #333333;
	margin-right: 68rpx;
}
.avater-texts{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 600;
	color: #333333;
	margin-right: 40rpx;
}
	
.avater-img{
	width: 40rpx;
	height: 40rpx;
	margin-right: 426rpx;

}
.avater-right{
	width: 40rpx;
	height: 40rpx;
}
.fonnum{
	height: 56rpx;
	width: 630rpx;
	display: flex;
	margin: 0px auto;
}
	
.fonnum-num{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #828080;
}
	
.info-contain{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.info-briday{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.info-sex{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.info-name{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}
</style>
